<template>
	<view class="content">
		<!-- 搜索框 -->
		<i class="iconfont icon-sousuo searchImg"></i>
		<input type="text" class="search" placeholder="搜索你想要的内容" disabled>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="banner"
			@change="swiperChange" :style="{'background': `linear-gradient(${background} 40%, rgb(255, 255, 255))`}"
			circular="true" indicator-active-color="white">
			<swiper-item v-for="item in aboutList" :key="item.id" class="bannerItem">
				<image :src="item.imageUrl" mode="aspectFill" class="bannerImg" @click="detailsClick(item.id)"></image>
			</swiper-item>
		</swiper>
		<!-- label列表 -->
		<view class="label">
			<view class="labelName" v-for="item in navList" :key="item.id">
				<text> {{item.name}}</text>
			</view>
			<view class="labelName">全部分类</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="hot-son">
				<view>
					<text style="margin-left: 10rpx;">热门推荐</text>
					<i class="iconfont icon-rementuijian"></i>
				</view>
				<text style="margin-right: 10rpx;color: gray;font-size: 20rpx;">全部></text>
			</view>
		</view>
		<!--列表页 -->
		<swiper class="door" next-margin="40rpx">
			<swiper-item>
				<view v-for="item in doorList" :key="item.id" >
					<view class="door-box">
						<view>
							<image :src="item.mainImage" mode="" class="door-img"></image>
						</view>
						<view class="box-text">
							<text>{{item.title}}</text>
							<view style="color: gray;">{{item.nickName}}</view>
							<view class="text-1">
								<text>{{item.priceOriginal}}</text>
								<text>{{item.commTotal}}人在学</text>
							</view>
						</view>
					</view>

				</view>

			</swiper-item>

			<swiper-item>
				<view v-for="item in gateList" :key="item.id" >
					<view class="door-box">
						<view>
							<image :src="item.mainImage" mode="" class="door-img"></image>
						</view>
						<view class="box-text">
							<text>{{item.title}}</text>
							<view style="color: gray;">{{item.nickName}}</view>
							<view class="text-1">
								<text>{{item.priceOriginal}}</text>
								<text>{{item.commTotal}}人在学</text>
							</view>
						</view>
					</view>

				</view>
			</swiper-item>
		</swiper>
		<!-- 近期更新 -->
		<view class="hot">
			<view class="hot-son">
				<view>
					<text style="margin-left: 10rpx;">近期更新</text>
					<i class="iconfont icon-rementuijian"></i>
				</view>
				<text style="margin-right: 10rpx;color: gray;font-size: 20rpx;">全部></text>
			</view>
		</view>
		<scroll-view scroll-x="true">
			<view class="recen">
				<view v-for="item in recentList" :key="item.id" class="rencen-left">
					<view>
						<image :src="item.mainImage" mode="" class="door-img"></image>
					</view>
					<view class="box-text">
						<text>{{item.title}}</text>
						<view style="color: gray;">{{item.nickName}}</view>
						<view class="text-1">
							<text>{{item.priceOriginal}}</text>
							<text>{{item.commTotal}}人在学</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 免费精选 -->
		<view class="hot">
			<view class="hot-son">
				<view>
					<text style="margin-left: 10rpx;">免费精选</text>
					<i class="iconfont icon-rementuijian"></i>
				</view>
				<text style="margin-right: 10rpx;color: gray;font-size: 20rpx;">全部></text>
			</view>
		</view>
		<swiper class="door">
			<swiper-item>
				<view v-for="item in doorList" :key="item.id">
					<view class="door-box">
						<view>
							<image :src="item.mainImage" mode="" class="door-img"></image>
						</view>
						<view class="box-text">
							<text>{{item.title}}</text>
							<view style="color: gray;">{{item.nickName}}</view>
							<view class="text-1">
								<text>{{item.priceOriginal}}</text>
								<text>{{item.commTotal}}人在学</text>
							</view>
						</view>
					</view>

				</view>

			</swiper-item>

			<swiper-item>
				<view v-for="item in gateList" :key="item.id">
					<view class="door-box">
						<view>
							<image :src="item.mainImage" mode="" class="door-img"></image>
						</view>
						<view class="box-text">
							<text>{{item.title}}</text>
							<view style="color: gray;">{{item.nickName}}</view>
							<view class="text-1">
								<text>{{item.priceOriginal}}</text>
								<text>{{item.commTotal}}人在学</text>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 付费精品 -->
		<view class="hot">
			<view class="hot-son">
				<view>
					<text style="margin-left: 10rpx;">付费精品</text>
					<i class="iconfont icon-rementuijian"></i>
				</view>
				<text style="margin-right: 10rpx;color: gray;font-size: 20rpx;">全部></text>
			</view>
		</view>
		<view>
			<view v-for="item,index in payList" :key="index" class="money">
				<view>
					<image :src="item.mainImage" mode=""
						style="width: 300rpx;height: 200rpx;margin-top: 5rpx;margin-bottom: 5rpx;"></image>
				</view>

				<view class="box-text" style="font-size: 25rpx;">
					<text>{{item.title}}</text>
					<view style="color: gray;">{{item.nickName}}</view>
					<view class="text-1">
						<text>{{item.priceOriginal}}</text>
						<text>{{item.commTotal}}人在学</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;font-size: 12rpx;color: gray;" v-if="!tag">我是有底线的</view>
	</view>
</template>

<script>
	import '../../static/icon/iconfont.css'
	import {
		banner,
		label,
		hot,
		pay
	} from "@/commont/interface.js"
	export default {
		data() {
			return {
				// 轮播图的数据
				aboutList: [],
				// 所在滑块的下标
				current: 0,
				// 背景颜色
				background: "#006C00",
				// label列表的数据
				navList: [],
				// 热门推荐的数据 免费精选
				doorList: [],
				gateList: [],
				// 近期更新的数据
				recentList: [],
				// 付费精品
				payList: [],
				// 默认页
				page: 1,
				//true 有下一页；false 没有下一页
				tag: true,
			}
		},
		onLoad() {
			// 调用轮播图的方法
			this.bannerList()
			//调用label列表的方法
			this.labelList()
			// 调用热门推荐的方法
			this.hotList()
			// 调用付费精品的方法
			this.moneyList()
		},
		// 页面触底加载
		onReachBottom() {
			if (!this.tag) return; //设置一个门
			this.page += 1
			this.moneyList()

			uni.showToast({
				title: "加载更多",
				icon: "loading"
			})
		},
		methods: {
			// 轮播图
			async bannerList() {
				let result = await banner()
				// 赋值
				this.aboutList = result.data.data
			},
			// current 改变时会触发 change 事件
			swiperChange(e) {
				this.current = e.detail.current
				this.background = this.aboutList[this.current].background
			},
			// label列表
			async labelList() {
				let result = await label()
				this.navList = result.data.data
				this.navList = this.navList.slice(0, 7)
			},
			// 热门推荐
			async hotList() {
				let result = await hot()
				this.doorList = result.data.data.records
				this.gateList = this.doorList
				this.recentList = this.gateList
				this.doorList = this.doorList.slice(0, 5)
				this.gateList = this.gateList.slice(5, 10)
			},
			// 付费精品
			async moneyList() {
				let result = await pay()
				this.payList = result.data.data.records
				if (this.payList.length <= 10) {
					this.tag = false
				}
				this.payList = this.payList.concat(this.payList)
			},
			// 跳转详情页
			detailsClick(id){ 
				uni.navigateTo({
					url:"/pages/details/details?id="+id
				})
			}
		}
	}
</script>

<style>
	.banner {
		width: 100%;
		height: 500rpx;
	}

	.bannerItem {
		width: 100%;
		height: 100%;
	}

	.bannerImg {
		margin-top: 40rpx;
		width: 650rpx;
		height: 350rpx;
		position: absolute;
		bottom: 0;
		left: 50rpx;
	}

	.search {
		position: absolute;
		top: 20rpx;
		background-color: white;
		width: 700rpx;
		height: 80rpx;
		margin-left: 25rpx;
		border-radius: 50rpx;
		text-align: center;
	}

	.searchImg {
		position: absolute;
		left: 170rpx;
		top: 30rpx;
		z-index: 9;
		font-size: 60rpx
	}

	.label {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		font-size: 20rpx
	}

	.labelName {
		width: 180rpx;
		height: 80rpx;
		background-color: #f8f9fb;
		margin-top: 10rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 20rpx;
	}

	.hot-son {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	.door {
		width: 750rpx;
		height: 1080rpx;
	}
	.door-box {
		display: flex;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 10rpx;

	}

	.door-img {
		width: 400rpx;
		height: 200rpx;
	}

	.box-text {
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	

		width: 435rpx;
	}

	.text-1 {
		display: flex;
		justify-content: space-between;
	}

	.recen {
		width: 1400rpx;
		display: flex;
	}

	.rencen-left {
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.money {
		margin-left: 10rpx;
		display: flex;
		;
		justify-content: space-between;
	}
</style>
